import React, {Component} from 'React';
import {NavLink} from 'react-router-dom'
import './filter.css'

export default class Filter extends Component{
    // checkbox
    constructor(props) {
        super(props);
        this.state       = {
            checkValues: [],
        }
    }

    handlerCheck(e){
        // console.log(e.target);
        var checkValues = this.state.checkValues.slice();
        var newVal      = e.target.value;
        var index       = checkValues.indexOf(newVal);
        if (index == -1) {
            checkValues.push(newVal)
        } else {
            checkValues.splice(index, 1);
        }
        // console.trace(checkValues)
        this.setState({
            checkValues: checkValues,

        })
        // 数据传入Parent
        if (this.props.onChange) {
            this.props.onChange(checkValues);
        }
    }

    // 筛选排序
    clickLists(e){
        $(function(){
            // $("#lists li").eq(0).addClass('activeli');
            $("#lists li a").on("click",function(){
                var _index = $("#lists li").index($(this));
                $(this).addClass('activeli').siblings().removeClass();
                $('#lists li').eq(_index).addClass('active').siblings().removeClass();
            })
        })
    }

    //获取输入价格
    inputChange(e){
        // console.log('abc',this.state);
        // var inputValues = this.state.inputValues.slice();
        var newVal = e.target.value;
        // var index       = inputValues.indexOf(newVal);
        console.log('dsytuyuyjfrt',newVal);
        if (index == -1) {
            inputValues.push(newVal)
        } else {
            inputValues.splice(index, 1);
        }
        console.trace(inputValues)
        this.setState({
            inputValues: inputValues,

        })
        // 数据传入Parent
        if (this.props.onChange) {
            this.props.onChange(inputValues);
        }
    }
    render(){
        var brand     = this.props.brand?this.props.brand:0;
        var classify  = this.props.classify?this.props.classify:0;
        var sortGoods = this.props.sortGoods?this.props.sortGoods:0;
        var check     = this.props.check?this.props.check:0;
        var price     = this.props.price?this.props.price:0;
        // var maxPrice  = this.props.maxPrice?this.props.maxPrice:0;
        // console.log('1233',this.props.brand)
        return(
            <div className="filter-box">
                <div className="filter">
                    <div className="filter-li">
                        <ul id="lists">{/* onClick={this.clickLists.bind(this)}*/}
                            <li><NavLink activeClassName="active" to={`/showProduct/${brand}/${classify}/0/${check}/${price}`}>综合
                            </NavLink></li>
                            <li><NavLink activeClassName="active" to={`/showProduct/${brand}/${classify}/1/${check}/${price}`}>销量
                            </NavLink></li>
                            <li><NavLink activeClassName="active" to={`/showProduct/${brand}/${classify}/2/${check}/${price}`}>评论数
                            </NavLink></li>
                            <li><NavLink activeClassName="active" to={`/showProduct/${brand}/${classify}/3/${check}/${price}`}>新品
                            </NavLink></li>
                            <li><NavLink activeClassName="active" to={`/showProduct/${brand}/${classify}/4/${check}/${price}`}>价格
                            </NavLink></li>
                        </ul>
                        <input type="text" placeholder="￥" onChange={this.inputChange.bind(this)}/>
                        <input type="text" placeholder="￥" onChange={this.inputChange.bind(this)}/>
                    </div>
                    <div className="filter-check">
                        <input name="goodCheckbox" type="checkbox" value="1" onChange={this.handlerCheck.bind(this)} />
                        &nbsp;货到付款&nbsp;&nbsp;&nbsp;
                        <input name="goodCheckbox" type="checkbox" value="2" onChange={this.handlerCheck.bind(this)} />
                        &nbsp;全球购&nbsp;&nbsp;&nbsp;
                        <input name="goodCheckbox" type="checkbox" value="3" onChange={this.handlerCheck.bind(this)} />
                        &nbsp;仅显示有货&nbsp;&nbsp;&nbsp;
                        <input name="goodCheckbox" type="checkbox" value="4" onChange={this.handlerCheck.bind(this)} />
                        &nbsp;新到商品&nbsp;&nbsp;&nbsp;
                    </div>
                </div>
            </div>
        )
    }
}


